<template>
  <div>
    <!--顶部导航-->
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>病床信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>病床信息查询</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 表单 -->
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="姓名：">
        <el-input v-model="ruleForm.name" placeholder="请输入病人名称"></el-input>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
      </el-form-item>
      <el-form-item label="病床号：">
        <el-input v-model="ruleForm.bedId" placeholder="请输入病床号"></el-input>
        <el-button type="primary" @click="submitForm('ruleForm')">查询</el-button>
      </el-form-item>
    </el-form>
    <!--内容表格开始-->
    <el-table :data="contentArr" border>
      <el-table-column label="序号" width="50px"
                       prop="id" align="center">
      </el-table-column>
      <el-table-column label="姓名"
                       prop="name" align="center">
      </el-table-column>
      <el-table-column label="年龄"
                       prop="age" align="center">
      </el-table-column>

      <el-table-column label="病症"
                       prop="disease" align="center"></el-table-column>
      <el-table-column label="主治医生"
                       prop="doctor" align="center"></el-table-column>
      <el-table-column label="病床号"
                       prop="bed_id" align="center"></el-table-column>
      <el-table-column label="入院时间"
                       prop="admission_date" align="center"></el-table-column>
      <el-table-column label="出院时间"
                       prop="discharge_date" align="center"></el-table-column>
      <el-table-column label="操作"  width="200px" fixed="right"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="success"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     @click="handleDelete(scope.$index, scope.row)">详情</el-button>
          <el-button size="mini" type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--内容表格结束-->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 表单
      ruleForm: {
        name: '',
        bedId: '',
      },
      // 表单规则
      rules: {

      }
    };
  },
  methods: {
    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {

      });
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>
<style>
.el-input{width: 700px}
</style>